<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		 div{
		 	width: 200px;
		 	height: 200px;
		 	background-color: green;
		 	/*1.块状元素：div h ul li h1 p 
		 	     -独占一行，可以设置宽高
		 	  2.行内元素inline: a span 
		 	     -无法设置宽高，在同一行
		 	  3.行内块元素 inine-block: img input textarea
		 	     -可以设置宽高，在同一行
		 	  如何转换元素类型：display: */
		 	/*转换成行内块元素*/
		 	display: inline-block;

		 }
		 span{
		 	/*基线对齐*/
		 	display: inline-block;
		 	background: pink;
		 	width: 300px;
		 	height: 300px;
		 	/*强制垂直方向对齐*/
		 	vertical-align: top;
		 }
		 input{
		 	width: 200px;
		 	height: 200px;
		 }

	</style>
</head>
<body>
	<!-- 换行也被算作一个空格，因此两个div中间会有空隙 -->
    <div></div>
    <div></div>
    <span>ss</span>
    <span>aa</span>
    <input type="" name="">
</body>
</html>